// 该文件用于创建整个应用的路由

// (1) vueRouer相当于router的构造函数，就跟Vuex.Store是store构造函数一样
import vueRouter from "vue-router";

import About from "../pages/About";
import Home from "../pages/Home";
import Message from "../pages/Message";
import News from "../pages/News";
import Detail from "../pages/Detail";


export default new vueRouter({
  // (2) routes复数，存放所有路由
  routes: [
    {
      path: "/about",
      component: About,
    },
    {
      path: "/home",
      component: Home,
      // (3) 子路由不需要加/因为写子路由说明后面有地址要写，就给你加上了
      children:[
        {
          // (4) 注意是component不是components，一个路由只对应一个组件。因此不是复数
          path:"message",
          component: Message,
          children:[
            {
              // (5) 当路由层级较多时，要写name属性，这样写地址的时候直接用name就行(必须得用to的对象形式)
              name:'detail',
              path: "detail/:id/:title",
              component: Detail,
              // (6) props给当前路由对应的组件传递参数

              // props的第一种写法，值为对象，对象中的所有数据都会以props的形式传给Detail组件
              // props:{ a:1, b:'hello'}

              // props的第二种写法，值为布尔值，若为真则会把该路由中的params参数，props的形式传给Detail组件
              // props:true

              // props的第三种写法，值为函数,接收还是用props
              // (7) 当属性的值为函数时就可以直接将属性变为函数,这就是简写形式
              // props:()=>{}
              /**
               * (8) 注意这里参数是给我$route参数的,后面用了连续解构赋值,为了不想写那么多层
               *     非常灵活,有了$route就可以任意拿属性,即可选择query还是params
               *     但是还是推荐第一种写法,好代码是简洁而且还要易懂,那样别人可能看不懂
               * (9) 注意: props只是为了接收参数时,更加简洁,和router-link发送参数不一样
               *     这里只是把参数拦截下来并用props的形式发给Detail
               * */ 
              props($route){
                 return {id:$route.query.id,title:$route.query.title}
              }
              // props({query:{id,title}}){
              //   return {id,title}
              // }
              // props({params:{id,title}}){
              //   return {id,title}
              // }
            }
          ]
        },
        {
          path:"news",
          component: News
        },
      ]
    },
  ],
});
